<template>
	<div>
		<van-field label="姓名" :value="userName" @blur="userNameM" placeholder="请输入真实姓名用于活动报名" input-align="right" />
		<van-cell title="性别" is-link @click='showChange(true)' :value="userSex" />
		<van-cell title="出生年月日" is-link @click="showDatef(true)" :value="birthday" />
		<!-- 生日 -->
		<van-field label="公司" :value="userCompany" @blur="userCompanyM" placeholder="请输入你的公司" input-align="right" />
		<van-field label="职位" :value="userPosition" @blur="userPositionM" placeholder="请输入你的职位" input-align="right" />
		<van-field label="个性签名" :value="userSign" @blur="userSignM" placeholder="一句话介绍自己" input-align="right" />


		<!-- <van-cell title="人身状态" is-link @click='showChange(true)' :value="userSex" /> -->

		<van-cell title="人身状态" @click="stateClick()" is-link :value="stateValue" arrow-direction="down" />

		<van-cell title="职场状态" @click="jobShow(true)" is-link :value="jobValue" arrow-direction="down" />

		<van-cell title="兴趣爱好" @click="hobbyShow(true)" is-link :value="checkedHobbys" arrow-direction="down" />


		<van-action-sheet :show="show" :actions="actions" @close='showChange(false)' @select="onSelect()" />

		<van-popup :show="showDate" @click-overlay='showDatef(false)' position="bottom">
			<van-datetime-picker type="date" @cancel="dateCancel" @confirm="dateDone" :value="currentDate"
				visible-item-count="5" :minDate="minDate" :maxDate="maxDate" @input="onInput" />
		</van-popup>

		<van-action-sheet :show="stateShow" @close="stateClose(false)" title=" ">
			<van-radio-group value="state" direction="horizontal">
				<div v-for="(item,index) in userState">
					<div style="margin-bottom: 1.5em;margin-left: 1.2em;" @click="stateInfo(item)">
						<van-radio :name="item" :value="item">
							{{item}}
						</van-radio>
					</div>
				</div>
			</van-radio-group>
		</van-action-sheet>

		<van-action-sheet :show="jobFlag" @close="jobClose(false)" title=" ">
			<van-radio-group value="job" direction="horizontal">
				<div v-for="(item,index) in jobArray" :key="item">
					<div style="margin-bottom: 1.5em;margin-left: 1.2em;" @click="jobInfo(item)">
						<van-radio :name="item" :value="item">
							{{item}}
						</van-radio>
					</div>
				</div>
			</van-radio-group>
		</van-action-sheet>

		<van-action-sheet :show="hobbyFlag" @close="hobbyShow(false)" title=" ">
			<van-checkbox-group :value="checkedHobbys" @change="hobbyValues" direction="horizontal">
				<div v-for="(item,index) in hobbyArray" :key="item">
					<div style="margin-bottom: 1.5em;margin-left: 1.2em;">
						<van-checkbox :name="item" :value="item">{{item}}</van-checkbox>
					</div>
				</div>
			</van-checkbox-group>
		</van-action-sheet>

		<div style="margin-top: 10%;">
			<van-button type="primary" @click="sub" size="large">提交</van-button>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataSex: -1,
				userName: '',
				userCompany: '',
				userPosition: '',
				userSign: '',
				checkedHobbys: [],
				hobbyValue: '可多选',
				hobbyFlag: false,
				hobbyArray: ['演出', '文艺', '手工', '公益', '时尚', '运动健康', '户外', '心理', '聚会交友', '休闲娱乐', '投资理财', '读书', '课程', '职场提升'],
				//-------
				jobArray: ['学生', '职场新人', '职场达人', '创业', '企业高管', '自由职业'],
				jobFlag: false,
				jobValue: '请选择',
				//-------
				stateValue: '请选择',
				stateShow: false,
				userState: ['单身', '恋爱中', '已婚', '宝妈宝爸', '退休'],
				showDate: false,
				birthday: '',
				//-----
				minDate: new Date(1900, 1, 1).getTime(),
				maxDate: new Date(2030, 12, 30).getTime(),
				currentDate: new Date().getTime(),
				// -------------
				show: false,
				userSex: '',
				actions: [{
						name: '保密',
						value: -1
					},
					{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					}
				],
				userbirthday: {
					minHour: 10,
					maxHour: 20,
					minDate: new Date().getTime(),
					maxDate: new Date(2019, 10, 1).getTime(),
					currentDate: new Date().getTime(),
				}
			}
		},
		methods: {
			userNameM(e) {
				this.userName = e.detail.value
			},
			userSignM(e) {
				this.userSign = e.detail.value
			},
			userPositionM(e) {
				this.userPosition = e.detail.value
			},
			userCompanyM(e) {
				this.userCompany = e.detail.value
			},
			showChange(flag) {
				this.show = flag
			},
			onSelect(e) {
				let {
					value,
					name
				} = e.detail
				this.userSex = name
				this.dataSex = value
				this.showChange(false)
			},
			onInput(event) {
				this.currentDate = event.detail
			},
			showDatef(flag) {
				this.showDate = flag
			},
			dateDone(event) {
				this.birthday = this.formatDate(event.detail)
				this.showDatef(false)
			},
			dateCancel() {
				this.showDatef(false)
			},
			formatDate(dateNum) {
				let year = new Date(dateNum).getFullYear()
				let month = new Date(dateNum).getMonth() + 1
				let day = new Date(dateNum).getDate()
				return year + '/' + month + '/' + day
			},
			stateClick() {
				this.stateShow = true
			},
			stateClose() {
				this.stateShow = false
			},
			stateInfo(v) {
				this.stateValue = v
				this.stateShow = false
			},
			jobShow(f) {
				this.jobFlag = f
			},
			jobClose(v) {
				this.jobShow(v)
			},
			jobInfo(v) {
				this.jobValue = v
				this.jobShow(false)
			},
			hobbyShow(f) {
				this.hobbyFlag = f
			},
			hobbyValues(event) {
				this.checkedHobbys = event.detail
				console.log(event)
			},
			sub() {
				let hobby = '';
				for (var i = 0; i < this.checkedHobbys.length; i++) {
					if (i === this.checkedHobbys.length - 1) {
						hobby += this.checkedHobbys[i]
					} else {
						hobby += this.checkedHobbys[i] + ","
					}
				}
				const userInfo = {
					"name": this.userName,
					"sex": this.dataSex,
					"birthday": this.birthday + ' 00:00:00',
					"company": this.userCompany,
					"position": this.userPosition,
					"sign": this.userSign,
					"state": this.stateValue,
					"focusonindustry": this.jobValue,
					"hobby": hobby
				}
				uni.request({
					url: 'http://localhost:8080/userinfo/user/userbaseinfo', //仅为示例，并非真实接口地址。
					data: userInfo,
					method: 'POST',
					header: {
						'Authorization': wx.getStorageSync('Authorization')
					},
					success: (res) => {
						console.log(res);
					}
				});
			}
		}
			
	}
</script>

<style>
</style>
